<script setup lang="ts">
import { onMounted, onBeforeMount, onUpdated, onUnmounted, ref, onBeforeUpdate, onBeforeUnmount, onErrorCaptured, watchEffect, onActivated, onDeactivated } from 'vue'

// 组件初始化
const lifes = ref<string[]>(["setup"])

onBeforeMount(() => {
    lifes.value.push("onBeforeMount")
})

onMounted(() => {
    lifes.value.push("onMounted")
})



// 数据更新
const update_lifes = ref<string[]>([])

onBeforeUpdate(() => {
    if (!update_lifes.value.includes("onBeforeUpdate")) {
        update_lifes.value.push("onBeforeUpdate")
    }
})

onUpdated(() => {
    if (!update_lifes.value.includes("onUpdated")) {
        update_lifes.value.push("onUpdated")
    }
})

// 组件销毁
const unmount_lifes = ref<string[]>([])
onBeforeUnmount(() => {
    unmount_lifes.value.push("onBeforeUnmount")
})

onUnmounted(() => {
    unmount_lifes.value.push("onUnmounted")
    console.log('lifes', unmount_lifes.value)
})

// 主动触发错误
function throwErr() {
    throw Error("点击事件中发生了错误")
}

// 激活
const activate_lifes = ref<string[]>([])
onActivated(() => {
    activate_lifes.value.push('onActivated')
})

onDeactivated(() => {
    activate_lifes.value.push('onDeactivated')
})
</script>
<template>
    <dl>
        <dt>组件初始化生命周期：</dt>
        <dd v-for="life in lifes" :key="life">{{ life }}</dd>
    </dl>
    <br />
    <dl>
        <dt>数据更新生命周期：</dt>
        <dd v-for="life in update_lifes" :key="life">{{ life }}</dd>
    </dl>
    <br />
    <button @click="throwErr">发生错误</button>
    <br />
    <br />
    <dl>
        <dt>组件激活生命周期：</dt>
        <dd v-for="life in activate_lifes" :key="life">{{ life }}</dd>
    </dl>
</template>